<ul
	style="
		padding: 0em;
		margin: 0em;
">
	<li style="
		list-style: none;
		float: left;
		width: 200px;
		border: 1px solid;
">
		<div id="block_channel_category" style="
		">
			<ul id="list_channel_category">
				<li style="">
					<a href="#" onClick='
new Ajax.Request(
	"/channel/getChannelList/",
	{
		asyncronous: false,
		evalScripts: true,
		onComplete: function(request)
		{
			Element.update("block_list_channel", request.responseText);
		}
	}
);
return false;
					'>ALL</a>
				</li>
				<li
					id="channel_category_one_uncategorized"
					style="
				">
					<a href="#" onClick='
new Ajax.Request(
	"/channel/getChannelList/",
	{
		asyncronous: false,
		evalScripts: true,
		parameters: "id_category=0",
		onComplete: function(request)
		{
			Element.update("block_list_channel", request.responseText);
		}
	}
);
return false;
					'>UnCategorized</a>
				</li>

<script type="text/javascript">
	Droppables.add(
		"channel_category_one_uncategorized",
		{
			hoverclass: "hover",
			accept:"channel_one",
			onDrop:function(element)
			{
				//element.parentNode.removeChild(element);
				new Effect.Fade(element.id, {duration: 1.0});
				/*
				new Ajax.Updater(
					"items",
					"/shop/add",
					{
						onLoading:function(request)
						{
							Element.show("indicator")
						},
						onComplete:function(request)
						{	
							Element.hide("indicator")
						},
						parameters:"id=" + encodeURIComponent(element.id),
						evalScripts:true,
						asynchronous:true
					}
				)
				*/
			}
		}
	)
</script>

				{% for category in list_category %}
					<li id="channel_category_one_{{category.id}}"
					>
						<a href="#" onClick='
this.parentNode.className = "active";
new Ajax.Request(
	"/channel/getChannelList/",
	{
		parameters: "id_category={{category.id}}",
		asyncronous: false,
		evalScripts: true,
		onComplete: function(request)
		{
			Element.update("block_list_channel", request.responseText);
		}
	}
);
return false;
						'>{{category.name}}</a>
					</li>
<script type="text/javascript">
	Droppables.add(
		"channel_category_one_{{category.id}}",
		{
			hoverclass: "hover",
			accept:"channel_one",
			onDrop:function(element)
			{
				//element.parentNode.removeChild(element);
				// get the id_channel
				var __id_channel = element.id.replace("block_channel.", "");
				new Ajax.Request(
					"/channel/changeCategory/",
					{
						parameters:"id_category=" + __id_channel +
							"&target_category={{category.id}}",
						evalScripts:true,
						asynchronous:true,
						onComplete:function(request)
						{	
							if (request.status == 200)
							{
								new Effect.Fade(element.id, {duration: 1.0});
							} else if (request.status == 405) {
								/* same category */
								new Effect.Pulsate(element.id, {duration: 1.0});
							} else {
								new Effect.Pulsate(element.id, {duration: 1.0});
							}
						}
					}
				)
			}
		}
	)
</script>

				{% endfor %}
				<div style="clear: both;"></div>
			</ul>
			<div style="clear: both;"></div>
			<div style="
				border: 1px solid red;
				text-align: center;
			">
				<a href="#" onClick='
var __width = $("list_channel_category").offsetWidth - 20;
/* create li */
var __element_li = document.createElement("LI");
/* create input box */
var __element_input = document.createElement("INPUT");
__element_input.style.width = __width + "px";
__element_input.name = "name_category";
__element_input.value = "";
__element_input.onblur = function (e)
{
	if (! trimString(this.value))
	{
		/* remove this child */
		//$("list_channel_category").removeChild(this.parentNode);
		new Effect.Fade(this.parentNode);
		return false;
	}

	var __name = trimString(this.value);
	var __input_element = this;
	new Ajax.Request(
		"/channel/saveCategory/",
		{
			parameters: "name_category=" + encodeURIComponent(__name),
			asyncronous: true,
			evalScripts: true,
			onComplete: function(request)
			{
				if (request.status != 200)
				{
					this.select();
				} else {
					var __category = request.responseText.parseJSON();
					var __parent = __input_element.parentNode;
					//__parent.appendChild(__name);

					var __link_name = document.createElement("A");
					__link_name.href = "#";
					__link_name.innerHTML = __name;
					__link_name.onClick = function(e)
					{
						new Ajax.Request(
							"/channel/getChannelList/",
							{
								parameters: "id_category=" + __category["id"],
								asyncronous: false,
								evalScripts: true,
								onComplete: function(request)
								{
									Element.update("block_list_channel", request.responseText);
								}
							}
						);
						return false;
					}

					//Element.update(__parent, __link_name);
					new Effect.Fade(
						__input_element,
						{
							afterFinish: function(e)
							{
								__parent.appendChild(__link_name);
							}
						}
					);
				}
			}
		}
	);

	/* save */
	return false;
}

__element_li.appendChild(__element_input);

/* connect method in input box. */

$("list_channel_category").appendChild(__element_li);
__element_input.focus();
return false;
				'
				title="New Category"
					><img src="/__media__/image/category.png"></a>
				<a href="#" title="Remove Category"
					onClick='
				'><img src="/__media__/image/trash.png"></a>
			</div>
		</div>
	</li>

	<li
		id="block_list_channel.add"
		style="
display: none;
list-style: none;
float: none;
border: 1px solid;
">
	<h2>Search and Add your rss channel</h2>
<form
	onsubmit='
Element.update("block_add_channel_msg", "");
Element.hide("block_add_channel_result");
Element.show("block_add_channel_updating");

var __s = trimString($("input_add_channel").value);
if (! __s)
{
	Element.update("block_add_channel_msg", "Enter string.");
	Element.hide("block_add_channel_updating");
	return false;
}

/* valid url */
new Ajax.Request(
	"/api/validateUrl/",
	{
		parameters: "url=" + encodeURIComponent(__s),
		asyncronous: true,
		evalScripts: true,
		onComplete: function(request)
		{
			if (request.status != 200)
			{
				Element.update("block_add_channel_msg", "The url invalid url, check it.");
				Element.hide("block_add_channel_updating");
				$("input_add_channel").select();
			} else {
				new Ajax.Request(
					"/api/getRSSUrlCandidate/",
					{
						parameters: "href=" + encodeURIComponent(request.responseText),
						asyncronous: true,
						evalScripts: true,
						onComplete: function(request)
						{
							if (request.status == 200)
							{
								Element.show("block_add_channel_result");
								Element.update("block_add_channel_result_inner", request.responseText);
								Element.hide("block_add_channel_updating");
							} else if (request.status == 600) {
								Element.hide("block_add_channel_result");
								Element.hide("block_add_channel_updating");
								Element.update("block_add_channel_msg", "Already added.");
							} else {
								Element.hide("block_add_channel_updating");
							}
						}
					}
				);
				Element.update("block_add_channel_msg", "");
			}
		}
	}
);

return false;
	'
	action="/api/validateUrl/">
	Enter URL <input type="text" id="input_add_channel" name="add_channel">
	<input type="submit" name="submit" value="Search">
	<input type="reset" name="reset" value="Clear">
</form>

<!-- indicators begin -->
<div id="block_add_channel_updating" style="
	padding: 0.5em;
	display: none;
"><img src="/__media__/image/running.gif">Fetching data. Please wait.</div>
<div id="block_add_channel_adding" style="
	padding: 0.5em;
	display: none;
"><img src="/__media__/image/running.gif">Adding channels. Please wait.</div>
<!-- indicators end -->

<div id="block_add_channel_msg" style="
	padding: 0.5em;
"></div>
<div id="block_add_channel_result" style="
	display: none;
	padding: 0.5em;
	border: 1px solid #a0c80e;
">
	<form name="form_select_href" id="form_add_channel_result"
		action="/channel/addChannel/" onsubmit='
var __input_list_selected = document.form_select_href.input_add_channel_href_selected;
var __a = new Array();
if (__input_list_selected.length)
{
	for (var i = 0; __input_list_selected.length > i; i++)
	{
		var __value = __input_list_selected[i].value;
		if (__value) __a.push(__value);
	}
} else {
	__a.push(__input_list_selected.value);
}

if (__a.length < 1)
{
	Element.update("block_add_channel_msg", "At least select one url.");
	return false;
} else {
	/* make query string */
	var __hrefs = new Array();
	$A(__a).each(
		function(i)
		{
			__hrefs.push("hrefs=" + encodeURIComponent(i));
		}
	);

	new Ajax.Request(
		"/channel/addChannel/",
		{
			asyncronous: true,
			evalScripts: true,
			parameters: __hrefs.join("&"),
			onLoading: function (e)
			{
				Element.show("block_add_channel_adding");
			},
			onComplete: function(request)
			{
				Element.hide("block_add_channel_adding");
				if (request.status == 200)
				{
					$("input_add_channel").value = "";
					Element.hide("block_add_channel_result");
					Element.update("block_add_channel_msg", "Successfully added.");
				} else {
					Element.update("block_add_channel_msg",
						"Failed to add this channels. Try again.");
				}
				setTimeout(function(e){Element.hide("block_add_channel_adding")}, 10);
			}
		}
	);
}
return false;
		'>
		<div id="block_add_channel_result_inner">
		</div>
		<input type="submit" name="submit" value="ADD">
	</form>
</div>

	</li>

	<li
		id="block_list_channel.list"
		style="
list-style: none;
float: none;
border: 1px solid;
">
		{% for channel in list_channel %}

		<div id="block_channel.{{channel.channel.id}}" class="channel_one" style="
			border: 1px solid #a0c80e;
			margin: 0.2em;
			cursor: move;
		">
			<a style="
				padding-left: 20px;
			"
			href="#" onClick='
		var this_link = this.parentNode;

		$("indicator_channel").style.position = "absolute";
		Element.show("indicator_channel");
		$("indicator_channel").style.top = this_link.offsetTop + 1 + "px";
		$("indicator_channel").style.left = (this_link.offsetLeft + 3) + "px";

		setTimeout(function(e)
		{
			new Ajax.Request(
				"/channel/getChannelEntryList/",
				{
					parameters: "id_channel={{channel.channel.id}}",
					asyncronous: true,
					evalScripts: true,
					onLoading: function (e)
					{
					},
					onComplete: function(request)
					{
						Element.hide("indicator_channel");

						if (request.status == 200)
						{
							Element.update("block_list_channel_entry", request.responseText);
							Element.hide("block_list_channel");
							Element.show("block_list_channel_entry");
							$("block_content.channel").scrollTop = 0;
						}
					}
				}
			);
		}, 1000);
		return false;
			'>
{% if channel.title %}
	{{channel.title}}
{% else %}
	{{channel.channel.title}}
{% endif %}
			</a>
			<a style="font-size: 70%;" href="#" onClick='
		if ($("block_channel_info_{{channel.channel.id}}").style.display == "none")
		{
			Element.show("block_channel_info_{{channel.channel.id}}");
			Element.update(this, " Hide.")
		} else {
			Element.hide("block_channel_info_{{channel.channel.id}}");
			Element.update(this, " More.")
		}
		return false;
			'> More.</a>

			<div id="block_channel_info_{{channel.channel.id}}" style="
				display: none;
			">
				<div>
				{{channel.channel.subtitle|striptags}}
				</div>
				<hr>
				<ul style="padding: 0em; margin: 0em;">
					<li style="list-style: none;">
						Last updated at {{channel.channel.status.timeUpdated}}.
					</li>
					<li style="list-style: none;">
						Added at {{channel.timeAdded}}.
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			new Draggable(
				"block_channel.{{channel.channel.id}}",
				{
					revert: true,
					dropOnEmpty: true
				}
			)
		</script>


		{% endfor %}
	</li>
</ul>

<script type="text/javascript">

</script>
